/**
* @Author: 李晨光
* @Date: 2019/12/18
* @Version: 1.0
* @Last Modified by: 李晨光
* @Last Modified time: 2019/12/18
  跳进来的页面需要带 shopId 过来
**/
<comment>
  # 积分兑换
</comment>
<template>
  <div id="Exchange" class="p-box">
    <div class="p-return">
      <mu-appbar color="primary" class="lan-header" style="box-shadow:none">
        <mu-button icon slot="left" v-close>
          <i class="iconfont angle-left iconangle-left"></i>
          <span class="lan-header-back">返回</span>
        </mu-button>积分兑换
      </mu-appbar>
    </div>
    <div class="p-content">
      <div class="person-container">
        <div class="person-list">
          <table class="custom-table">
            <tr>
              <td>姓名</td>
              <td>{{selectResult['userName']}}</td>
            </tr>
            <tr>
              <td>工号</td>
              <td>{{selectResult['employeeNum']}}</td>
            </tr>
            <tr>
              <td>项目</td>
              <td>{{selectResult['orgName']}}</td>
            </tr>
            <tr v-if="selectResult['unitName']">
              <td>单位</td>
              <td>{{selectResult['unitName']}}</td>
            </tr>
            <tr>
              <td colspan="2">当前可兑换积分：{{selectResult['leftScore']}}</td>
            </tr>
          </table>
        </div>
        <div class="person-form" v-if="selectResult.leftScore>0">
          <div class="person-label">输入兑换积分</div>
          <div class="person-click">
            <input type="number" v-model="total" class="exchange-input" />
            <span @click="exchange" class="exchange-btn">确认兑换</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";
import Search from "@/search/Search.vue";
import debounce from "lodash.debounce";
export default {
  name: "Exchange",
  components: {
    Search
  },
  props: {},
  data() {
    return {
      api: {
        getUserMsgApi: "/safety/starObserve/userInfo" // 获取人员信息
      },
      total: null,
      selectResult: {
        leftScore: 0,
        userId: ""
      }
    };
  },

  computed: {},
  created() {
    this.initPage();
  },
  mounted() {},
  watch: {},
  methods: {
    initPage() {
      this.getUserMsg();
    },
    getUserMsg() {
      this.selectResult = this.$route.query;
    },
    exchange() {
      if (
        Number(this.total) > 0 &&
        Number(this.total) <= Number(this.selectResult.leftScore)
      ) {
        this.$nextTick(() => {
          MessageBox({
            message: `确认为${this.selectResult.userName}(工号${this.selectResult.employeeNum})兑换${this.total}积分？`,
            showCancelButton: true,
            showConfirmButton: true,
            confirmButtonText: "确认",
            cancelButtonText: "取消"
          })
            .then((value, action) => {
              if (value == "confirm") {
                this.$A
                  .Go("post", "/safety/shop/exchange", {
                    exchangeScore: this.total, //兑换分数
                    shopId: this.$route.query.shopId
                      ? this.$route.query.shopId
                      : "123", //商铺id
                    userId: this.$route.query.userId
                  })
                  .then(res => {
                    this.$closeLoading();
                    if (res.code == 200) {
                      this.selectResult.leftScore =
                        this.selectResult.leftScore - this.total;
                      this.$router.push({
                        name: "ExchangeResult",
                        query: {
                          type: "success"
                        }
                      });
                    } else {
                      this.$router.push({
                        name: "ExchangeResult",
                        query: {
                          type: "error"
                        }
                      });
                    }
                  });
              } else {
              }
            })
            .catch(err => {});
        });
      } else {
        this.$A.MS(`请输入正确的积分`);
      }
    }
  },
  destroyed() {}
};
</script>

<style lang="scss">
#Exchange {
  .search-input {
    margin-bottom: 0 !important;
    width: 100%;
    .mu-input-line,
    .mu-input-focus-line {
      display: none;
    }
    input {
      width: 3.47rem;
      height: 0.33rem;
      background: rgba(235, 235, 237, 1);
      border-radius: 0.83rem;
      padding: 0 0.15rem;
      font-size: 0.13rem;
      font-weight: 400;
      color: rgba(61, 61, 61, 1);
      text-align: center;
    }
  }
  .lan-nodata {
    flex: 1;
  }
  .search {
    width: 3.47rem;
    height: 0.33rem;
    /*background: rgba(248, 248, 248, 1);*/
    border-radius: 0.83rem;
    font-size: 0.13rem;
    font-weight: 400;
    color: rgba(140, 140, 140, 1);
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .p-content {
    background: #fff;
    padding: 0.14rem;
    .select-project {
      display: flex;
      height: 0.4rem;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.08rem;
      .project-name {
        font-size: 0.2rem;
        flex: 1;
        margin-right: 0.25rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
        color: rgba(61, 61, 61, 1);
      }
      .project-change {
        font-size: 0.15rem;
        font-weight: 500;
        color: rgba(0, 128, 203, 1);
      }
    }
    .select-shop {
      font-weight: 500;
      display: flex;
      height: 0.33rem;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.15rem;
      .shop-name {
        flex: 1;
        font-size: 0.17rem;
        color: rgba(61, 61, 61, 1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .shop-history {
        font-size: 0.14rem;
        font-weight: 500;
        color: rgba(0, 128, 203, 1);
      }
    }
    .person-container {
      margin-top: 0.35rem;
      padding: 0 0.23rem;
      .custom-table {
        tr:not(:last-child) {
          td:first-child {
            width: 0.8rem;
            background: rgba(245, 245, 245, 1);
          }
          td:last-child {
            text-align: right;
          }
        }
        tr {
          td {
            padding: 0.11rem;
          }
        }
        tr:last-child {
          td {
            padding: 0.15rem;
          }
        }
      }
      .person-form {
        margin-top: 0.15rem;
        .person-label {
          font-size: 0.15rem;
          font-weight: 500;
          color: rgba(61, 61, 61, 1);
          font-weight: bold;
        }
        .person-click {
          display: flex;

          .exchange-input {
            flex: 1;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            height: 0.4rem;
            padding: 0 0.14rem;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          }
          .exchange-btn {
            margin-left: 0.05rem;
            display: inline-block;
            width: 1.03rem;
            height: 0.4rem;
            line-height: 0.4rem;
            text-align: center;
            background: rgba(0, 128, 203, 1);
            border-radius: 0.04rem;
            color: #fff;
          }
        }
      }
      .person-history {
        margin-top: 0.44rem;
        font-size: 0.13rem;
        color: rgba(0, 128, 203, 1);
        text-align: center;
      }
    }
  }
}
</style>
